<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<h:head>
	<!-- Custom CSS styles -->  
    <style type="text/css">  
    	table
    	{
    		margin: 0 auto;
    	}
    	.alinearDerecha 
    	{
    		float: right; !important; 
    	}
    	.alinearIzquierda 
    	{
    		float: left !important; 
    		text-align: left !important;
    	}
  
    </style> 
	</h:head>
	<h:body>
	<div style="text-align: center; margin: 0 auto !important;">
		<h:form>
			<p:panel>
				<h2 style="color: red;">Simulador Hipotecario</h2>
<p:panelGrid style="margin-top:20px">  
    <f:facet name="header"> 
        <p:row>  
				<p:column>Producto</p:column>
				<p:column>Financiación</p:column>
				<p:column>%</p:column>
				<p:column>Cuota mes 1</p:column>
				<p:column>Cuota año 1</p:column>
				<p:column>Cuota año 5</p:column>
				<p:column>Cuota año 10</p:column>
				<p:column>Cuota año 15</p:column>
        </p:row>  
    </f:facet>   
       <p:row>
				<p:column styleClass="ui-widget-header" rowspan="3">Leasing</p:column>
				<p:column>
					<a href="http://example.com" style="text-decoration: none">
    					<div style="height:100%;width:100%;">
      						UVR Baja
   						</div>
  					</a>
				</p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
	 </p:row>
      <p:row>
				<p:column>
					<a href="http://example.com" style="text-decoration: none">
    					<div style="height:100%;width:100%;">
      						UVR Media
   						</div>
  					</a>
				</p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
	 </p:row>
	 <p:row>
				<p:column>
					<a href="http://example.com" style="text-decoration: none">
    					<div style="height:100%;width:100%;">
      						Pesos
   						</div>
  					</a>
				</p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
	 </p:row>
	 <p:row>
				<p:column rowspan="3" styleClass="ui-widget-header">Crédito Hipotecario</p:column>
				<p:column>
				<a href="http://example.com" style="text-decoration: none">
    				<div style="height:100%;width:100%;">
      						UVR Baja
   					</div>
  				</a>
				</p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
	 </p:row>
	 <p:row>
				<p:column>
				<a href="http://example.com" style="text-decoration: none">
    					<div style="height:100%;width:100%;">
      						UVR Media
   						</div>
  				</a>
				</p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
	 </p:row>
	 <p:row>
				<p:column>
					<a href="http://example.com" style="text-decoration: none">
    					<div style="height:100%;width:100%;">
      						Pesos
   						</div>
  					</a>
				</p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
				<p:column></p:column>
	 </p:row>
</p:panelGrid>
<!-- //////////////////////////////////////////////////////// -->
  <p:dataTable var="car" value="#{tableBean.carsSmall}">
        <p:column headerText="Producto">
            <h:outputText value="#{car.year}" />  
        </p:column>  
  
        <p:column headerText="Financiación">  
            <h:outputText value="#{car.manufacturer}" />  
        </p:column>  
  
        <p:column headerText="%">  
            <h:outputText value="#{car.color}" />  
        </p:column>    
        <p:column headerText="Couta mes 1">
            <h:outputText value="#{car.year}" />  
        </p:column>  
  
        <p:column headerText="Couta año 1">  
            <h:outputText value="#{car.manufacturer}" />  
        </p:column>  
  
        <p:column headerText="Cuota año 5">  
            <h:outputText value="#{car.color}" />  
        </p:column>      
        <p:column headerText="Cuota año 10">
            <h:outputText value="#{car.year}" />  
        </p:column>  
  
        <p:column headerText="Cuota año 15">  
            <h:outputText value="#{car.manufacturer}" />  
        </p:column>      
    </p:dataTable>
<!-- //////////////////////////////////////////////////////// -->  
<p:dataGrid var="car" value="#{tableBean.carsSmall}" columns="1">  
  
      <p:panelGrid style="margin-top:20px">  
      <f:facet name="header"> 
        <p:row>  
				<p:column>Producto</p:column>
				<p:column>Financiación</p:column>
				<p:column>%</p:column>
				<p:column>Cuota mes 1</p:column>
				<p:column>Cuota año 1</p:column>
				<p:column>Cuota año 5</p:column>
				<p:column>Cuota año 10</p:column>
				<p:column>Cuota año 15</p:column>
        </p:row>  
    </f:facet> 
       <p:row>
				<p:column styleClass="ui-widget-header">Leasing</p:column>
				<p:column><h:outputText value="#{car.manufacturer}" /></p:column>
				<p:column><h:outputText value="#{car.year}" /> </p:column>
				<p:column><h:outputText value="#{car.color}" /></p:column>
				<p:column><h:outputText value="#{car.manufacturer}" /></p:column>
				<p:column><h:outputText value="#{car.year}" /> </p:column>
				<p:column><h:outputText value="#{car.color}" /></p:column>
				<p:column><h:outputText value="#{car.color}" /></p:column>
	 </p:row>
	
</p:panelGrid>    
</p:dataGrid>
<!-- //////////////////////////////////////////////////////// --> 

				<h:panelGrid columns="1">
					<p:commandButton id="atrasButton" value="Cancelar" />
				</h:panelGrid>
			</p:panel>
		</h:form>
		</div>
	</h:body>
</html>